home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / iframe-ssi-script2.izs < prev    next >
Text File  |  2005-09-01  |  11KB  |  194 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Iframe SSI script II
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>This is version II of the original Iframe SSI script, which like the original script lets you seamlessly display external content on your page via an IFRAME. It does this by dynamically resizing the IFRAME to be the height of the page contained within it, eliminating any possible IFRAME scrollbars from appearing while snugly showing the entire external content. Think of it as SSI (server side includes) emulated using DHTML! This script works in both IE5+ and NS6+, and for other browsers, supports the option to either completely hide the iframe in question or display it using its default height.
  9.  
  10. Now, this script differs from the original in that you can load additional documents* into the IFRAME even after the page has loaded, and the IFRAME will dynamically adjust its height to fit the new document. So use this script if you need to not only display external content via the IFRAME tag, but intend to change this content after the page has loaded.
  11.  
  12. *All external pages loaded into the iframe must be from the same domain as the page the iframe tag is inserted in. Setting the iframe's src to an external site such as "http://www.google.com" will not work, since the script cannot probe and detect the height of pages from external domains.
  13.  
  14.  
  15. <!/DESCRIPTION> 
  16.  
  17. <!CATEGORY>dynamic content<!/CATEGORY>
  18.  
  19. <!SCRIPT>
  20. <!-- START OF SCRIPT -->
  21. <!-- Step 1: Insert the below script into the HEAD section of your page: -->
  22. <script type="text/javascript">
  23.  
  24. /***********************************************
  25. * IFrame SSI script II- ⌐ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
  26. * Visit DynamicDrive.com for hundreds of original DHTML scripts
  27. * This notice must stay intact for legal use
  28. ***********************************************/
  29.  
  30. //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
  31. //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
  32. var iframeids=["myframe"]
  33.  
  34. //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
  35. var iframehide="yes"
  36.  
  37. var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
  38. var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
  39.  
  40. function resizeCaller() {
  41. var dyniframe=new Array()
  42. for (i=0; i<iframeids.length; i++){
  43. if (document.getElementById)
  44. resizeIframe(iframeids[i])
  45. //reveal iframe for lower end browsers? (see var above):
  46. if ((document.all || document.getElementById) && iframehide=="no"){
  47. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
  48. tempobj.style.display="block"
  49. }
  50. }
  51. }
  52.  
  53. function resizeIframe(frameid){
  54. var currentfr=document.getElementById(frameid)
  55. if (currentfr && !window.opera){
  56. currentfr.style.display="block"
  57. if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
  58. currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
  59. else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
  60. currentfr.height = currentfr.Document.body.scrollHeight;
  61. if (currentfr.addEventListener)
  62. currentfr.addEventListener("load", readjustIframe, false)
  63. else if (currentfr.attachEvent){
  64. currentfr.detachEvent("onload", readjustIframe) // Bug fix line
  65. currentfr.attachEvent("onload", readjustIframe)
  66. }
  67. }
  68. }
  69.  
  70. function readjustIframe(loadevt) {
  71. var crossevt=(window.event)? event : loadevt
  72. var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
  73. if (iframeroot)
  74. resizeIframe(iframeroot.id);
  75. }
  76.  
  77. function loadintoIframe(iframeid, url){
  78. if (document.getElementById)
  79. document.getElementById(iframeid).src=url
  80. }
  81.  
  82. if (window.addEventListener)
  83. window.addEventListener("load", resizeCaller, false)
  84. else if (window.attachEvent)
  85. window.attachEvent("onload", resizeCaller)
  86. else
  87. window.onload=resizeCaller
  88.  
  89. </script>
  90. <!-- Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like: -->
  91. <iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
  92. <!-- Configuring the script
  93. To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.
  94.  
  95. Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.
  96.  
  97. Thirdly, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.
  98.  
  99. Last but not least, as shown in the demo above, you can actually use links on your main page to load a page into your IFRAME (with the IFRAME automatically resized to that page's height of course). To do so, the link should look like this:
  100.  
  101. <a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>where "myframe" is the ID of the IFRAME you wish to load a page into, and "external.htm", the path to the page on your site to load.
  102.  -->
  103. <!-- END OF SCRIPT -->
  104. <!/SCRIPT>
  105.  
  106. <!PREVIEW>
  107. <!-- START OF SCRIPT -->
  108.  
  109. <!-- Step 1: Insert the below script into the HEAD section of your page: -->
  110. <script type="text/javascript">
  111.  
  112. /***********************************************
  113. * IFrame SSI script II- ⌐ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
  114. * Visit DynamicDrive.com for hundreds of original DHTML scripts
  115. * This notice must stay intact for legal use
  116. ***********************************************/
  117.  
  118. //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
  119. //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
  120. var iframeids=["myframe"]
  121.  
  122. //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
  123. var iframehide="yes"
  124.  
  125. var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
  126. var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
  127.  
  128. function resizeCaller() {
  129. var dyniframe=new Array()
  130. for (i=0; i<iframeids.length; i++){
  131. if (document.getElementById)
  132. resizeIframe(iframeids[i])
  133. //reveal iframe for lower end browsers? (see var above):
  134. if ((document.all || document.getElementById) && iframehide=="no"){
  135. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
  136. tempobj.style.display="block"
  137. }
  138. }
  139. }
  140.  
  141. function resizeIframe(frameid){
  142. var currentfr=document.getElementById(frameid)
  143. if (currentfr && !window.opera){
  144. currentfr.style.display="block"
  145. if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
  146. currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
  147. else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
  148. currentfr.height = currentfr.Document.body.scrollHeight;
  149. if (currentfr.addEventListener)
  150. currentfr.addEventListener("load", readjustIframe, false)
  151. else if (currentfr.attachEvent){
  152. currentfr.detachEvent("onload", readjustIframe) // Bug fix line
  153. currentfr.attachEvent("onload", readjustIframe)
  154. }
  155. }
  156. }
  157.  
  158. function readjustIframe(loadevt) {
  159. var crossevt=(window.event)? event : loadevt
  160. var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
  161. if (iframeroot)
  162. resizeIframe(iframeroot.id);
  163. }
  164.  
  165. function loadintoIframe(iframeid, url){
  166. if (document.getElementById)
  167. document.getElementById(iframeid).src=url
  168. }
  169.  
  170. if (window.addEventListener)
  171. window.addEventListener("load", resizeCaller, false)
  172. else if (window.attachEvent)
  173. window.attachEvent("onload", resizeCaller)
  174. else
  175. window.onload=resizeCaller
  176.  
  177. </script>
  178. <!-- Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like: -->
  179. <iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
  180. <!-- Configuring the script
  181. To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.
  182.  
  183. Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.
  184.  
  185. Thirdly, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.
  186.  
  187. Last but not least, as shown in the demo above, you can actually use links on your main page to load a page into your IFRAME (with the IFRAME automatically resized to that page's height of course). To do so, the link should look like this:
  188.  
  189. <a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>where "myframe" is the ID of the IFRAME you wish to load a page into, and "external.htm", the path to the page on your site to load.
  190.  -->
  191. <!-- END OF SCRIPT -->
  192. <!/PREVIEW>
  193.  
  194. <!RELATED>NONE<!/RELATED>